<template>
	<view
		:style="'background: url(' + imgData.messageBg + ') no-repeat;background-size: contain;height:' + systemInfo.screenHeight + 'px;'">
		<u-navbar title="客观意向" :autoBack="true" bgColor="transparent" :fixed="false">
		</u-navbar>
		<view class="">
			<u-tabs :list="tabsData" :lineColor="$u.color.color" @click="click" :current="current"></u-tabs>
		</view>

		<template v-if="!noData">
			<view class="p-30" style="padding-bottom: 120rpx;">
				<navigator :url="`/pages/mine/wish/detail?id=${item.id}`" class="card p-30"
					:class="{'mt-30' : index != 0}" v-for="(item,index) in list">
					<view class="flex-row justify-between align-center mb-30">
						<view class="flex-row align-center size">
							<view class="ml-10 tag">
								要求
							</view>
							<view class="ml-10">
								{{item.yaoqiu}}
							</view>

						</view>
					</view>
					<view class="small-size gray-color desc">
						{{item.time}}
						{{item.price}}元
						{{item.type}}
						（{{item.service}}）
					</view>
					<view class="flex-row justify-between align-center mt-30">
						<view class="flex-row align-center">
							<view class="flex-row align-center">
								<u-avatar :src="item.user.avatar" size="24"></u-avatar>
								<view class="small-size gray-color ml-10">
									{{item.user.nickname}}
								</view>
							</view>
							<view class="small-size gray-color ml-30">
								{{$u.timeFormat(item.user.jointime, 'yyyy年mm月dd日')}}
							</view>
						</view>
						<view class="">
							<u-button :color="$u.color.color" text="查看详情" shape="circle" size="mini"></u-button>
						</view>
					</view>
				</navigator>
			</view>

		</template>
		<template v-else>
			<u-empty mode="data">
			</u-empty>
		</template>

		<view @click="jumpPage('/pages/mine/wish/form')" class="intention"
			:style="'background: url('+ intention +') no-repeat;background-size: 100% 100%;'">

		</view>
		<page-tabbar :value="2" />
	</view>
</template>

<script>
	import {
		intentionList,
		intentionUserList
	} from '@/common/api.js'
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				current: 0,
				tabsData: [{
					name: '我的意愿'
				}, {
					name: '发布广场'
				}],

				status: 'loading',
				list: [],
				noData: false,
				page: 1,
				total: 0
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			click(e) {
				console.log(e);
				this.current = e.index
				this.init();
			},
			init() {
				this.status = "loading";
				this.list = [];
				this.page = 1;
				this.noData = false;
				this.getList();
			},
			async getList() {
				let vm = this;
				let params = {
					'page': this.page,
					'limit': this.$u.config.limit,
				};

				let res = this.current == 0 ? await intentionUserList({
					params
				}) : await intentionList({
					params
				})
				console.log('current', this.current);
				if (res.rows.length != 0) {
					this.noData = false;
					this.list = this.list.concat(res.rows);
					this.total = res.total;
					this.page++;
					this.status = "loadmore"
				} else {
					this.noData = true;
					this.status = "nomore"
				}
			},
			//上拉
			onPullDownRefresh() {
				this.status = "loading"
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//下拉
			onReachBottom() {
				let vm = this;
				this.status = 'loading';
				//延时为了看效果
				setTimeout(() => {
					if (vm.page > Math.ceil(vm.total / this.$u.config.limit)) {
						this.status = 'nomore';
					} else {
						vm.getList();
					}
				}, 200)
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.tag {
		background-color: $color;
		color: #fff;
		border-radius: $radius;
		border-top-right-radius: 20rpx;
		padding: 5rpx 10rpx;
		font-size: 24rpx;
	}

	.desc {
		background: linear-gradient(90deg, #FFF6E5 0%, rgba(255, 241, 216, 0.08) 100%);
		padding: 10rpx;
		border-radius: $radius;
	}

	.intention {
		position: fixed;
		right: 30rpx;
		bottom: 150rpx;
		width: 200rpx;
		height: 200rpx;
		background-color: #FFF6E5;
		color: #F8CCAF;
		display: flex;
		flex-direction: row;
		align-items: end;
		padding-bottom: 60rpx;
		box-sizing: border-box;
		text-align: center;
		justify-content: center;
		font-size: 20rpx;
		line-height: 240rpx;
	}
</style>